$page-background-gradient-left: #3caad7;
$page-background-gradient-right: #2a6fce;
$results-background: #3a5d80;
$pink: #F1BEBE;
$white: white;
$dark-gray: #888;
$medium-gray: #ccc;
$light-gray: #eee;
$light-blue-gray: #E7F3FF;
$transparent-light-white: rgba( 255, 255, 255, 0.15 );
$transparent-medium-white: rgba( 255, 255, 255, 0.2 );
$transparent-dark-white: rgba( 255, 255, 255, 0.6 );
$variation-a: #F1C40F;
$variation-b: #B6E2FF;
$result-radius: 10px;
$data-label-width: 100px;
$data-input-width: 160px;
$data-input-border-width: 1px;
$data-input-horizontal-padding: 4px;
$data-input-total-width: $data-input-width + $data-input-border-width * 2 + $data-input-horizontal-padding * 2;
$arrow-width: 25px;
$result-separation: 10px;
$graph-width: 475px;
$summary-horizontal-padding: 15px;
$mobile-breakpoint: 720px;
$two-column-breakpoint: 960px;

@mixin border-radius( $radius ) {
	border-radius: $radius;
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
}

@mixin background-horizontal-gradient( $color1, $color2 ) {
	background: $color1;
	background: -webkit-gradient(linear,left top,right top,color-stop(0%,$color1),color-stop(100%,$color2));
	background: -webkit-linear-gradient(left,$color1 0,$color2 100%);
	background: -webkit-gradient(linear,left top,right top,from($color1),to($color2));
	background: linear-gradient(to right,$color1 0,$color2 100%);
}

html {
	@include background-horizontal-gradient( $page-background-gradient-left, $page-background-gradient-right );
	font: 14px/20px Lato, Helvetica, Arial;
	padding: 0 2%;
}

.wrapper {
	margin: 0 auto;
	max-width: $two-column-breakpoint;
	// padding: 0 2%;
	width: 100%;
}

h1 {
	margin: 30px 0;
	text-align: center;

	a {
		color: $light-blue-gray;
		font-size: 23px;
		font-weight: bold;
		letter-spacing: 1px;
		text-decoration: none;

		&:hover {
			color: white;
		}
	}
}

h3 {
	color: $light-blue-gray;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.fork-me {
	border: 0;
	position: absolute;
	right: 0;
	top: 0;

	@media ( max-width: $mobile-breakpoint) {
		display: none;
	}
}

.variation-a {
	color: $variation-a;
}

.variation-b {
	color: $variation-b;
}

strong {
	font-weight: bold;
}

.form-container {
	margin-bottom: $result-separation;

	form {
		float: left;
		overflow: auto;
		width: 600px;

		.header-row {
			margin-bottom: 5px;

			span {
				color: $light-gray;
				display: inline-block;
				font-size: 15px;
				text-align: center;
				width: $data-input-total-width;
			}

			.participants {
				margin-left: $data-label-width;
			}

			.conversions {
				margin-left: $arrow-width;
			}
		}

		.variation {
			margin-bottom: 5px;

			.label {
				display: inline-block;
				width: $data-label-width;

				a {
					font-size: 15px;
					text-decoration: none;

					&.variation-a {
						border-bottom: 1px dotted $variation-a;
					}

					&.variation-b {
						border-bottom: 1px dotted $variation-b;
					}
				}
			}

			input[type="text"] {
				border: 1px solid $light-gray;
				color: #555;
				font-size: 15px;
				padding: 6px $data-input-horizontal-padding;
				text-align: center;
				width: $data-input-width;
			}

			.arrow {
				color: $light-blue-gray;
				display: inline-block;
				text-align: center;
				width: $arrow-width;
			}

			.reset {
				color: $light-gray;
				margin-left: 10px;
			}
		}
	}

	.copy-url {
		float: right;
		margin-top: 60px;

		@media ( min-width: $mobile-breakpoint ) and ( max-width: $two-column-breakpoint ) {
			clear: both;
			float: left;
			margin-top: 10px;
		}

		// Hide the copy results URL link on mobile
		@media ( max-width: $mobile-breakpoint ) {
			display: none;
		}

		// ZeroClipboard wraps the content in a span tag
		span {
			@include border-radius(3px);
			background: $transparent-light-white;
			border: 1px solid $transparent-dark-white;
			color: $light-gray;
			cursor: pointer;
			display: block;
			font-size: 12px;
			padding: 8px 16px;

			// Prevent width from mysteriously shrinking milliseconds after page load
			min-width: 100px;

			&:hover, &.zeroclipboard-is-hover {
				background: $transparent-medium-white;
			}
		}
	}
}

.results {
	clear: both;
	float: left;
	margin-top: $result-separation;

	.error {
		color: $pink;
		font-size: 21px;
		margin-top: 15px;
	}

	.graphs {
		.graph {
			@include border-radius( $result-radius );
			background-color: $results-background;
			display: inline-block;
			margin-bottom: $result-separation;
			padding: 15px 0;
			width: $graph-width;

			p {
				color: #ddd;
				line-height: 1.5em;
				padding: 0 20px;
				text-align: center;
			}

			&:first-of-type {
				margin-right: $result-separation;
			}
		}
	}

	.summary {
		@include border-radius( $result-radius );
		background-color: $results-background;
		color: $white;
		font-size: 17px;
		line-height: 1.6em;
		margin-bottom: $result-separation;
		padding: $summary-horizontal-padding;
		text-align: center;

		@media ( max-width: $two-column-breakpoint ) {
			width: $graph-width - $summary-horizontal-padding * 2;
		}

		h3 {
			margin-bottom: 5px;
		}
	}
}
